@import "../../style/global.scss";

$rootName: x-image-picker;

.#{$rootName} {
    display: flex;
    padding: 10px;

    .#{$rootName}-item {
        width: 158px;
        height: 158px;
        margin-right: 19px;
        position: relative;

        .#{$rootName}-img-del {
            width: 36px;
            height: 36px;
            position: absolute;
            top: -10px;
            right: -10px;
            background: url('../icon-close.png') no-repeat;
        }

        .#{$rootName}-img {
            height: 100%;
            width: 100%;
            border-radius: 3px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .#{$rootName}-picker {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 6px;
            border: 1px solid #ddd;
            background-color: #fff;
            position: relative;
            overflow: hidden;

            &::before {
                width: 50px;
                height: 4px;
                content: " ";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #ccc;
            }

            &::after {
                width: 4px;
                height: 50px;
                content: " ";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #ccc;
            }

            input {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                opacity: 0;
            }
        }
    }
}